<template>
	<div>
		<fade-animation>
			<div class="Backlayer" v-if="showBacklayer"></div>
		</fade-animation>
		<mt-swipe :auto="3000" class="swiper">
			<mt-swipe-item v-for="(item,index) in swiperData.swiper" :key="index">
				<img :src="item.imgUrl" @click="handleItemClick(item.pId)" alt />
			</mt-swipe-item>
		</mt-swipe>
	</div>
</template>

<script>
	import { Swipe, SwipeItem } from "mint-ui";
	import HomeDetail from "./Detail";
	import FadeAnimation from "../animation/Fade";

	export default {
		name: "HomeSwiper",
		props: ["swiperInfo"],
		data() {
			return {
				swiperData: [],
				showBacklayer: false
			};
		},
		watch: {
			swiperInfo() {
				this.getSwiper();
			}
		},
		mounted() {
			this.getSwiper();
			var self = this;
			this.bus.$on("closelayerView", function(val) {
				self.showBacklayer = val;
			});
		},
		methods: {
			getSwiper() {
				this.swiperData = this.swiperInfo;
			},
			handleItemClick(id) {
				this.$store.commit("openDetail", id);
				this.showBacklayer = true;
			}
		},
		components: {
			HomeDetail,
			FadeAnimation
		}
	};
</script>

<style scoped>
	.swiper {
		height: 24vw;
		margin: 4.3vw 4.3vw 1vw 4.3vw;
		border-radius: 0.6vw;
		overflow: hidden;
	}
	.swiper img {
		height: 24vw;
	}
	.swiper >>> .mint-swipe-indicators {
		bottom: 2px;
	}
	.Backlayer {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}
</style>